<template>
    <el-dialog
        :title="eventType == 'login' ? '登录' : '注册'"
        v-loading="loading"
        :visible.sync="visible"
        width="500px"
        center
        :append-to-body="true"
        :before-close="modalClose"
        :close-on-click-modal="true"
        :close-on-press-escape="false"
    >
        <div id="user-form">
            <el-form ref="form" :model="user" label-width="80px">
                <el-row class="form-item">
                    <el-col :span="3"
                        ><span class="form-item-label">邮箱</span></el-col
                    >
                    <el-col :span="1">&nbsp;</el-col>
                    <el-col :span="20"
                        ><el-input
                            v-model="user.email"
                            placeholder="请输入邮箱账号"
                            autofocus="true"
                            clearable
                        ></el-input
                    ></el-col>
                </el-row>
                <el-row class="form-item">
                    <el-col :span="3"
                        ><span class="form-item-label">密码</span></el-col
                    >
                    <el-col :span="1">&nbsp;</el-col>
                    <el-col :span="20"
                        ><el-input
                            type="password"
                            v-model="user.password"
                            clearable
                            maxlength="20"
                            placeholder="请输入密码"
                        ></el-input
                    ></el-col>
                </el-row>
                <el-row class="form-item" v-show="eventType == 'register'">
                    <el-col :span="3"
                        ><span class="form-item-label">验证码</span></el-col
                    >
                    <el-col :span="1">&nbsp;</el-col>
                    <el-col :span="12">
                        <el-input
                            v-model="user.code"
                            clearable
                            maxlength="4"
                            placeholder="请输入验证码"
                        ></el-input>
                    </el-col>
                    <el-col :span="1">&nbsp;</el-col>
                    <el-col :span="7">
                        <el-button
                            class="btn-code"
                            :disabled="disabled"
                            @click="getVerificationCode"
                        >
                            发送验证码
                        </el-button>
                    </el-col>
                </el-row>
            </el-form>
            <el-button
                class="btn-submit"
                type="primary"
                :loading="onSubmitLoading"
                @click="onSubmit"
                >{{ eventType == "login" ? "登录" : "注册" }}</el-button
            >
        </div>
    </el-dialog>
</template>

<script>
export default {
    props: {
        visible: {
            type: Boolean,
            default: false,
        },
    },
    data() {
        return {
            user: { email: "", password: "", code: "" },
            disabled: false,
            onSubmitLoading: false,
            loading: false,
            eventType: "login",
        };
    },
    methods: {
        getVerificationCode() {
            if (this.user.email.length == 0) {
                this.$message.info("请先填写邮箱账号！");
                return;
            }
            this.disabled = true;
            setTimeout(() => {
                this.disabled = false;
            }, 10000);

            this.$axios
                .get(
                    "/api/remote/user/verificationCode?username=" + this.user.email
                )
                .then((response) => {
                    console.log(response.data);
                    if (response.data.success == false) {
                        this.$message.error(response.data.message);
                    }
                });
        },
        onSubmit() {
            if (this.user.email.length == 0) {
                this.$message.info("请填写邮箱账号！");
                return;
            }
            if (this.user.password.length == 0) {
                this.$message.info("请输入密码！");
                return;
            }
            if (this.eventType == "register" && this.user.code.length == 0) {
                this.$message.info("请输入验证码！");
                return;
            }

            this.onSubmitLoading = true;
            var params = {
                username: this.user.email,
                password: this.user.password,
                code: this.user.code,
            };
            var requestPath =
                this.eventType == "login"
                    ? "/api/remote/user/login"
                    : "/api/remote/user/register";
            this.$axios.post(requestPath, params).then((response) => {
                if (response.data.success == true) {
                    if (this.eventType == "login") {
                        this.noticeLocalServer(response.data.o);
                        this.$emit("setUser", response.data.o);
                        this.$message.success("登录成功");
                        this.modalClose();
                    } else {
                        this.$message.success("注册成功");
                        this.modalClose();
                    }
                } else {
                    this.$message.error(response.data.message);
                }
                this.onSubmitLoading = false;
            }).catch(error => {
                console.log(error);
                this.onSubmitLoading = false;
            });
        },
        noticeLocalServer(data) {
            console.log("Login success and then notice the local server.")
            console.log(data);
            this.$axios.post("/api/frp/login/success", data);
        },
        setEventType(type) {
            this.eventType = type;
        },
        modalClose() {
            this.user = { email: "", password: "", code: "" };
            this.onSubmitLoading = false;
            this.$emit("update:visible", false);
        },
    },
};
</script>

<style scoped>
#user-form {
    padding: 0 10px 5px 10px;
}
.btn-submit {
    width: 100%;
}
.btn-code {
    width: 100%;
}
.form-item {
    margin-bottom: 20px;
}
.form-item-label {
    display: inline-block;
    width: 100%;
    height: 40px;
    line-height: 40px;
    text-align: justify;
    text-align-last: justify;
}
</style>